<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-24 17:38:15
 * @LastEditTime: 2024-05-09 22:45:38
 * @FilePath: \env-manager-pc\src\views\document\manager\create\index.vue
-->
<script setup lang="ts">
import BaseInfo from './base_info/index.vue'
import MainTable from './main_table/main.table.vue'
import ChanWu from './chan_wu/chan.wu.vue'
import ZhiWu from './zhi_wu/zhi.wu.vue'
import { useEntPageData } from './createHelper'
import Access from './access/index.vue'
import useEntStore from '@/store/modules/ent'
import useKeepAliveStore from '@/store/modules/keepAlive'

const keepAliveStore = useKeepAliveStore()

onBeforeRouteLeave((to) => {
  if (to.name !== 'document-manager-list') {
    keepAliveStore.remove('DocumentManagerList')
  }
})

const { getEntBaseInfo, refreshDevices } = useEntStore()
const pageLoading = ref(false)

const tabs = reactive([
  { name: '基本信息', key: markRaw(BaseInfo) },
  { name: '总表信息', key: markRaw(MainTable) },
  { name: '产污设施', key: markRaw(ChanWu) },
  { name: '治理设施', key: markRaw(ZhiWu) },
  { name: '账号管理', key: markRaw(Access) },
])

const current = ref<string>('基本信息')

const { id } = useEntPageData()
onMounted(async () => {
  try {
    pageLoading.value = true
    if (id.value) {
      await getEntBaseInfo(id.value)
      await refreshDevices(id.value)
    }
    pageLoading.value = false
  }
  catch (error) {
    pageLoading.value = false
  }
})

function canUse(item: any) {
  if (item.name === '基本信息') {
    return false
  }
  return !id.value
}
</script>

<template>
  <PageMain v-loading="pageLoading">
    <el-tabs v-model="current" class="tab-bar">
      <el-tab-pane v-for="item in tabs" :key="item.name" lazy :label="item.name" :name="item.name" :disabled="canUse(item)">
        <Component :is="item.key" />
      </el-tab-pane>
    </el-tabs>
  </PageMain>
</template>
